<template>
  <!-- a标签 -->
  <div class="link">
    <router-link :to="path">{{ title }}</router-link>
    <div class="border"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    title: String,
    path: String,
  },
});
</script>

<style lang="scss" scoped>
.link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 1.5rem;
  a {
    font-family: inherit;
    color: #2c3e50;
    position: relative;
    text-align: center;
  }
  .border {
    width: 0%;
    height: 0.1rem;
    background-color: #3eaf7c;
    transition: 0.3s;
  }
  &:hover {
    .border {
      width: 100%;
    }
  }
}
</style>
